<script setup>
import { ref, onMounted, reactive } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import qs from 'qs'
import { ElMessageBox } from 'element-plus'
import buttoncoment from '../button/button.vue'
import axios from 'axios';
import jwt_decode from "jwt-decode";

const router = useRouter();
const input = ref('')
const header= ref('向商家付款')
var moneyPatten = /^[1-9]\d{0,8}$/

const isMoneyTrue = ref(true)

function determine() {
    isMoneyTrue.value = moneyPatten.test(money.value)
}

const userNumber = ref('') //用户账号

const targetUserNumber = ref('') //商户账号

const value = ref('钱包') //下拉选框类别的返回信息

const money = ref('') //输入的付款金额

const value1 = ref('') //下拉框的银行卡或者信用卡账号

// const value2 = ref('') //下拉选框的信用卡账号
//定义两个数组
//从后端数据库中请求的类型数据
const types = [
    {
        value: '钱包',
        label: '钱包',
    },
    {
        value: '储蓄卡/活期账户',
        label: '储蓄卡/活期账户',
    },
    {
        value: '信用卡',
        label: '信用卡',
    }
]
//从后端数据库中请求的类型数据对应的卡类型
const cards1 = ref()//储蓄卡的数组
const cards2 = ref()//信用卡的数组

let token = jwt_decode(localStorage.getItem("token"))
if (token == null) {
    token = jwt_decode(localStorage.getItem("longToken"))
}


//初始化的时候就渲染好类别和卡号
onMounted(() => {
    axios.get("http://192.168.110.221:8080/user/queryBindAccountTypeController", {
        params: {
            token: localStorage.getItem("token"),
            longToken: localStorage.getItem("longToken"),
            userId: token.userId,
            userNumber:token.userNumber
        }
    }).then((resp) => {
        if (resp.data.code == 200) {
            console.log(resp.data.datas);
            cards1.value = resp.data.datas.bindAccountDetails //银行卡的数组
            cards2.value = resp.data.datas.bindAccountCredDetails //信用卡的数组 
            console.log(cards2.value[0].accountNumber);
            console.log(cards2.value[1].accountNumber);
        } else if (resp.data.code == 500) {
            //服务器错误
            open("服务器错误")
        }
    }).catch((e) => {
        // catch中获取到的值是请求失败或者代码问题造成的错误，而因代码造成的错误在.then()中获取不到，因此我们常用catch
        // 我们偶尔会遇到一些问题：明明请求成功了，逻辑却进入catch中了，这时说明在then中的处理逻辑可能出现了错误，并不是请求失败才会进入catch
        //跳转到404页面
        // open("发生了一些错误")
    })
})
function open(errormsg) {
    ElMessageBox.alert(errormsg, '验证失败!', {
        confirmButtonText: '确认',
    })
}
function select() {
    if(targetUserNumber.value == "" || money.value == ""){
        open("请输入商家账户和金额")
    }else{
        if (isMoneyTrue.value) {
                sessionStorage.setItem('userNumber', userNumber.value),//用户账号
                sessionStorage.setItem('payType', value.value),//类别
                sessionStorage.setItem('amount', money.value),//输入金额
                sessionStorage.setItem('targetUserNumber', targetUserNumber.value)//商家账号
                sessionStorage.setItem('accountNumber', value1.value),//选择的银行卡账号
                sessionStorage.setItem('header',header.value)//当下的表头
                //弹出一个输入密码组件
                router.push('/payment-password')
        }else{
            money.value == "" 
        }
    }
}
</script>

<template>
    <!-- label	这是给用户看的，当点击下拉菜单时，会出来选项，用户看到的选项就是这个
            value	这是你点击某个label(option)之后，将对应的值给v-model绑定的值model
            key	    这个呢相当于身份令牌，唯一的，防止出错，虽然没有也行，但是官网推荐还是加上为好。
 -->
 <div class="container">
    <div class="boby-1">
        <p style="width: 100%; text-align: center; font-size: 14px;margin-bottom: 5px; font-weight: 600;">列表中选择支付方式</p>
        <div class="top">
            <i class="iconfont icon-dianpuanquan- right-1" style="font-size: 30px; color: aquamarine;"></i>
            <el-select v-model="value" filterable placeholder="支付类型" style="width: 100px;">
                <el-option v-for="item in types" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
            <el-select v-if="value == '钱包'" disabled filterable placeholder="选择银行卡账号">
                <el-option />
            </el-select>
            <el-select v-if="value == '储蓄卡/活期账户'" v-model="value1" filterable placeholder="选择银行卡账号">
                <el-option v-for="item in cards1" :key="item.value" :label="item.accountNumber"
                    :value="item.accountNumber" />
            </el-select>
            <el-select v-if="value == '信用卡'" v-model="value1" filterable placeholder="选择信用卡账号">
                <el-option v-for="item in cards2" :key="item.value" :label="item.accountNumber"
                    :value="item.accountNumber" />
            </el-select>
            <input type="text" placeholder="请输入商户账号" v-model=targetUserNumber  maxlength="12">
            <input type="text" placeholder="请输入付款金额" v-model=money @blur="determine()" maxlength="9">
            <p class="p1" v-if="!isMoneyTrue">只能付款金额框输入数字且不为空</p>
            <!-- <el-input-number v-model="num" :min="1" :max="99999"/> -->
            <div>
                <buttoncoment btn-name="立即转账" btn-color="#0278FE" @click="select" />
            </div>
        </div>
    </div></div>
</template>
<style scoped>
.boby-1 {
    background-color: #fff;
    padding: 10px 0 1px;
}
.container{
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #fff;
}
.top {
    width: 100%;
    text-align: center;
    line-height: 40px;
}

.right-1 {
    vertical-align: middle;
}

input {
    width: 80%;
    font-size: 18px;
    outline: none;
    margin-top: 12px;
    /* margin-left: 5px; */
    padding: 10px 0;
    border: transparent;
    border-bottom: 1px solid lightgray;
}

button {
    width: 100%;
    height: 40px;
    color: #fff;
    border: transparent;
    font-size: 16px;
}
.p1{
    width: 260px;
    margin: 0 auto;
    color: red;
    font-size: 14px;
    text-align: left;
    text-indent: 10px;
}
</style>